<template>
  <div>
    <!-- 编辑或者添加评价 -->
    <template v-if="showType == 1">
      <div v-for="(item, index) in subComment" :key="index" class="c-flex-column c-aligni-sb c-mb12 c-bg-white c-pv24 c-ph24">
        <div class="c-flex-row c-aligni-start c-justify-sb c-mb24">
          <div class="c-ww80 c-hh80 c-text-hidden c-br8">
            <img class="c-w100" :src="$addXossFilter(item.avatar, require('../../assets/defult270.png'))" alt="" />
          </div>
          <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb c-pl20 c-hh80">
            <div class="c-fs24 c-lh34 c-fc-xblack c-text-ellipsis1">{{item.goodsName}}</div>
            <div class="c-fs20 c-lh28 c-fc-gray c-flex-row" v-if="item.subSpecs">
              规格：{{item.subSpecs}}
            </div>
          </div>
        </div>
        <template v-if="item.extra == null">
          <div class="c-flex-row c-aligni-center c-justify-sb c-pb24 c-bd-b1-f6">
            <div class="c-fs24 c-lh34 c-fc-xblack">评星：</div>
            <div class="c-flex-row c-aligni-center">
              <div class="c-fs24 c-lh34 c-fc-gray">{{rankMap[item.starRank]}}</div>
              <div class="c-flex-row c-aligni-center c-ml8">
                <span class="c-fs24 iconfont c-ml12" :class="item.starRank >= num ? 'theme-fc' : 'c-fc-e6'" v-for="num in 5" :key="num" @click="showStars(index, num)">&#xe8c7;</span>
              </div>
            </div>
          </div>
          <div class="c-mt24 c-p">
            <i class="c-pa iconfont icon-bianji2 c-fc-sgray c-fs24 c-pz10 c-p-t0 c-p-l0" v-show="(!item.words || item.words.length == 0) && item.showIcon"></i>
            <textarea placeholder="从多个角度评价宝贝，可以帮助更多想买的人哦" maxlength="500" v-model="item.words" @keyup="onKeyUp" @keydown="onKeyDown(index)" class="c-w100 c-bd0 c-hh125 c-fc-xblack c-fs22 c-lh32 "/>
            <div class="c-fc-sblack c-fs20 c-lh28 c-mt24">已写<span class="theme-fc">{{!item.words || item.words.length == 0 ? 0 : item.words.length}}/500</span>字</div>
          </div>
          <div class="c-flexw-wrap c-flex-row c-mt24">
            <div v-for="(imgItem,imgIndex) in item.pictures" :key="imgIndex" class="c-ww188 c-hh188 c-br10 c-text-hidden c-mb10 c-flex-row c-flex-center c-p" :class="(imgIndex + 1) % 3 == 0 ? '':'c-mr12'">
              <div @click="delUploadImage(index,imgIndex)" class="del-img iconfont">&#xe8fd;</div>
              <img @click="clickPreviewImage(index,imgItem,item.pictures)" class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(imgItem)" alt=""/>
            </div>
            <div v-if="(item.pictures && item.pictures.length < 6) || !item.pictures" class="c-ww188 c-ww188 c-flex-row c-flex-center c-p">
              <div class="c-ww188 c-hh188 c-flex-row c-flex-center c-bd-dash-e6 c-br10 c-text-hidden" @click="clickAddPic(index, '', item.pictures)">
                <div class="c-flex-column c-aligni-center c-justify-center">
                  <i class="iconfont c-fs40 c-fc-xblack">&#xe689;</i>
                  <span class="c-fc-xblack c-fs20 c-lh28">添加照片</span>
                </div>
              </div>
              <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-ww188 c-hh188 c-fs10" v-if="!isWeiXin" name="file" type="file" accept="image/*" @change="clickAddPic(index, $event, item.pictures)" />
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-justify-sb c-mt24">
            <div class="c-flex-row c-aligni-center" @click="setAnonymous(index)">
              <span class="c-ww28 c-hh28 c-brp50 iconfont" :class="item.isAnonymous == 1 ? 'theme-bg c-fs14 c-fc-white c-flex-row c-flex-center' : 'c-bd1-e6'">&#xe82c;</span>
              <span class="c-fc-xblack c-fs22 c-lh32 c-ml12">匿名评价</span>
            </div>
            <div class="c-fc-sblack c-fs20 c-lh28">评价将隐藏你的用户名</div>
          </div>
        </template>
        <template v-else>
          <div class="c-mt24 c-p">
            <span class="c-pa c-pz10 c-p-t0 c-p-l0 textareaPlaceholder" v-show="item.extra.extraWords.length == 0 && item.extra.showExtraIcon"><i class="iconfont icon-bianji2 c-mr20"></i>已经用了一段时间了，有更多商品使用心得？分享给想买的他们吧</span>
            <textarea maxlength="500" v-model="item.extra.extraWords" @keyup="onKeyUp" @keydown="onKeyDown(index, item.extra)" class="c-w100 c-bd0 c-hh125 c-fc-xblack c-fs22 c-lh32"/>
            <div class="c-fc-sblack c-fs20 c-lh28 c-mt24">已写<span class="theme-fc">{{!item.extra.extraWords || item.extra.extraWords.length == 0 ? 0 : item.extra.extraWords.length}}/500</span>字</div>
          </div>
          <div class="c-flexw-wrap c-flex-row c-mt24">
            <div v-for="(imgItem,imgIndex) in item.extra.extraPictures" :key="imgIndex" class="c-ww188 c-hh188 c-br10 c-text-hidden c-mb10 c-flex-row c-flex-center c-p" :class="(imgIndex + 1) % 3 == 0 ? '':'c-mr12'">
              <div @click="delUploadImage(index,imgIndex,item.extra)" class="del-img iconfont">&#xe8fd;</div>
              <img @click="clickPreviewImage(index,imgItem,item.extra.extraPictures)" class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(imgItem)" alt=""/>
            </div>
            <div v-if="(item.extra.extraPictures && item.extra.extraPictures.length < 6) || !item.extra.extraPictures" class="c-ww188 c-ww188 c-flex-row c-flex-center c-p">
              <div class="c-ww188 c-hh188 c-flex-row c-flex-center c-bd-dash-e6 c-br10 c-text-hidden" @click="clickAddPic(index, '', item.extra.extraPictures, item.extra)">
                <div class="c-flex-column c-aligni-center c-justify-center">
                  <i class="iconfont c-fs40 c-fc-xblack">&#xe689;</i>
                  <span class="c-fc-xblack c-fs20 c-lh28">添加照片</span>
                </div>
              </div>
              <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-ww188 c-hh188 c-fs10" v-if="!isWeiXin" name="file" type="file" accept="image/*" @change="clickAddPic(index, $event, item.extra.extraPictures, item.extra)" />
            </div>
          </div>
        </template>
      </div>
    </template>

    <!-- 订单评价详情或者单一订单评价详情 -->
    <template v-if="showType == 2">
      <div v-for="(item, index) in subComment" :key="index" class="c-flex-column c-aligni-sb c-bg-white c-pv24 c-ph24" :class="index == (subComment.length - 1) ? '' : 'c-mb12'">
        <div class="c-flex-row c-aligni-start c-justify-sb c-mb24">
          <div class="c-ww80 c-hh80 c-text-hidden c-br8" @click="goShopDetail(item.mgId)">
            <img class="c-w100" :src="$addXossFilter(item.avatar, require('../../assets/defult270.png'))" alt="" />
          </div>
          <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb c-pl20 c-hh80">
            <div class="c-fs24 c-lh34 c-fc-xblack c-text-ellipsis1">{{item.goodsName}}</div>
            <div class="c-fs20 c-lh28 c-fc-gray c-flex-row" v-if="item.subSpecs">
              规格：{{item.subSpecs}}
            </div>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-pb24 c-bd-b1-f6" v-if="item.isAcquiesceComment == 0">
          <div class="c-fs24 c-lh34 c-fc-xblack">评星：</div>
          <div class="c-flex-row c-aligni-center">
            <div class="c-fs24 c-lh34 c-fc-gray">{{rankMap[item.starRank]}}</div>
            <div class="c-flex-row c-aligni-center c-ml20">
              <span class="c-fs24 iconfont c-ml12" :class="item.starRank >= num ? 'theme-fc' : 'c-fc-e6'" v-for="num in 5" :key="num">&#xe8c7;</span>
            </div>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-mt24">
          <div class="c-flex-row c-aligni-center">
            <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" class="c-brp50 img-pe-none c-ww40 c-hh40 c-mr12">
            <span class="c-fs22 c-lh32 c-fc-xblack" v-if="item.isAnonymous == 1 && item.nickname">匿名</span>
            <span class="c-fs22 c-lh32 c-fc-xblack c-maxw360 c-text-ellipsis1" v-else>{{nameLength(item.nickname, 2)}}</span>
          </div>
          <div class="c-fs22 c-lh32 c-fc-sgray">{{item.createTime}}</div>
        </div>
        <div class="c-flex-column c-justify-sb">
          <div class="c-fs22 c-fc-xblack c-mt12">{{!item.words && item.isAcquiesceComment == 0 ? '未填写评语' : (item.isAcquiesceComment == 1 && item.isUpdated == 0 ? '默认好评' : item.words)}}</div>
          <div v-if="item.pictures" class="c-mt12 c-flex-row c-flexw-wrap">
            <div
              v-for="(img, imgIndex) in item.pictures" :key="imgIndex"
              @click="clickPreviewImage(imgIndex, img, item.pictures)"
              class="c-ww188 c-hh188 c-br4 c-text-hidden"
              :class="[(imgIndex + 1) % 3 == 0 ? '':'c-mr12',imgIndex <= 2 && item.pictures.length > 3 ? 'c-mb20' : '']"
            >
              <img :src="$addXossFilter(img)" class="c-object-fit-cover c-h c-w100">
            </div>
          </div>
        </div>
        <div v-if="item.extra && item.extra.status == 1" class="c-bd-t1 c-pt20 c-mt20">
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <div class="c-fs22 theme-fc">用户收货{{item.extra.day > 0 ? item.extra.day + '天后' : '当天'}}追评</div>
            <div class="iconfont icon-dian c-fs20 c-fc-sblack" v-if="checkTime(item.extra.createdAt)" @click="clickShowExtraOperation(item)"></div>
          </div>
          <div>
            <div class="c-fs22 c-fc-xbalck c-mt12 c-p c-textAlign-j">{{item.extra.extraWords}}</div>
            <div v-if="item.extra.extraPictures" class="c-flex-row c-flexw-wrap c-mt12">
              <div
                v-for="(img, imgIndex) in item.extra.extraPictures" :key="imgIndex"
                @click="clickPreviewImage(imgIndex, img, item.extra.extraPictures)"
                class="c-ww188 c-hh188 c-br4 c-text-hidden"
                :class="[(imgIndex + 1) % 3 == 0 ? '':'c-mr12',imgIndex <= 2 && item.extra.extraPictures.length > 3 ? 'c-mb20' : '']"
              >
                <img :src="$addXossFilter(img)" class="c-object-fit-cover c-h c-w100">
              </div>
            </div>
          </div>
        </div>
        <div v-if="item.extra && item.extra.status == -1" class="c-pt20 c-mt20 c-bd-t1 c-fc-gray c-fs24">此追评已删除</div>
        <div v-if="item.commentReply && item.commentReply.length > 0" class="c-mt12">
          <div class="c-bg-f6 c-ph12 c-pt12 c-br4">
            <p class="c-fc-sblack c-fs22">商家回复：</p>
            <div v-for="(con, i) in item.commentReply" :key="i" class="c-fc-xbalck c-fs22">
              <div class="c-pv10">{{con.content}}</div>
              <div :class="item.commentReply.length - 1 != i ? 'underline' : ''"></div>
            </div>
          </div>
        </div>
        <div v-if="subComment && subComment.length > 1 && checkTime(item.createdAt)" class="c-flex-row c-aligni-center c-mt24 c-justify-end">
          <div class="c-fs22 c-lh32 c-pv8 c-ph24 c-br24 c-bd1-ccc c-fc-xblack" @click="updateComment(item)" v-if="item.isUpdated == 0">修改评价</div>
          <div class="c-fs22 c-lh32 c-pv8 c-ph24 c-br24 theme-bd1 theme-fc" :class="item.isUpdated == 0 ? 'c-ml24' : ''" @click="delectComment(item.id)">删除评价</div>
        </div>
      </div>
    </template>

    <!-- 查看商品评价列表 -->
    <template v-if="showType == 3">
      <div v-for="(item, index) in subComment" :key="index" class="c-flex-column c-aligni-sb c-mb12 c-bg-white c-pv24 c-ph24">
        <div class="c-flex-row c-aligni-center c-justify-sb">
          <div class="c-flex-row c-aligni-center">
            <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" class="c-brp50 img-pe-none c-ww40 c-hh40 c-mr12">
            <span class="c-fs22 c-lh32 c-fc-xblack" v-if="item.isAnonymous == 1 && item.nickname">匿名</span>
            <span class="c-fs22 c-lh32 c-fc-xblack c-maxw360 c-text-ellipsis1" v-else>{{nameLength(item.nickname, 2)}}</span>
          </div>
          <div class="c-fs22 c-lh32 c-fc-sgray">{{item.createdAt}}</div>
        </div>
        <div class="c-flex-row c-aligni-center c-mt16">
          <div class="c-flex-row c-aligni-center" v-if="item.isAcquiesceComment == 0">
            <span class="c-fs24 iconfont c-mr12" :class="item.starRank >= num ? 'theme-fc' : 'c-fc-e6'" v-for="num in 5" :key="num">&#xe8c7;</span>
          </div>
          <span class="c-fc-e6 c-fs20 c-ml20 c-mr20" v-if="item.isAcquiesceComment == 0 && item.subSpecs">|</span>
          <div class="c-fs20 c-lh28 c-fc-gray c-flex-row" v-if="item.subSpecs">
            规格：{{item.subSpecs}}
          </div>
        </div>
        <div class="c-flex-column c-justify-sb" v-if="(item.isAcquiesceComment == 0) || (item.isAcquiesceComment == 1 && item.isUpdated == 1)">
          <div class="c-fs22 c-fc-xbalck c-mt12 c-p c-textAlign-j" :class="item.showMore ? 'c-text-ellipsis5' : ''" :id="'txtBox' + index">{{!item.words ? '这个买家有点懒，没有填写评语' : item.words}}<span class="c-bg-white c-fc-xblue c-fs22 c-pa c-p-r0 c-p-b-4 c-pl4" v-show="item.showMore" @click="showMore(index)">查看更多</span></div>
          <div v-if="item.pictures" class="c-pb24 c-flex-row c-flexw-wrap c-mt16">
            <div v-for="(img, imgIndex) in item.pictures" :key="imgIndex" @click="clickPreviewImage(imgIndex, img, item.pictures)">
              <div class="c-ww290 c-hh290 c-flex-row c-aligni-center c-text-hidden c-br10" :class="(imgIndex + 1) % 2 == 0 ? '':'c-mr12'" v-if="item.pictures.length == 2"><img :src="$addXossFilter(img)" class="c-object-fit-cover c-w100 c-h"></div>
              <div class="c-ww188 c-hh188 c-flex-row c-aligni-center c-text-hidden c-br10" :class="[(imgIndex + 1) % 3 == 0 ? '':'c-mr12',imgIndex <= 2 ? 'c-mb10' : '']" v-else-if="item.pictures.length >= 3"><img :src="$addXossFilter(img)" class="c-object-fit-cover c-w100 c-h"></div>
              <div class="c-ww160 c-hh160 c-flex-row c-aligni-center c-text-hidden c-br10 c-mr12" v-else><img :src="$addXossFilter(img)" class="c-object-fit-cover c-w100 c-h"></div>
            </div>
          </div>
        </div>
        <div v-else class="c-fs22 c-fc-xblack c-mt12">默认好评</div>
        <div v-if="(item.extraWords && item.extraWords.length > 0) || (item.extraPictures && item.extraPictures.length > 0)" class="c-bd-t1 c-pt20 c-mt20">
          <div class="c-fs22 theme-fc">用户收货{{item.day > 0 ? item.day + '天后' : '当天'}}追评</div>
          <div>
            <div class="c-fs22 c-fc-xbalck c-mt12 c-p c-textAlign-j" :class="item.showExtraMore ? 'c-text-ellipsis5' : ''" :id="'extraTxtBox' + index">{{item.extraWords}}<span class="c-bg-white c-fc-xblue c-fs22 c-pa c-p-r0 c-p-b-4 c-pl4" v-show="item.showExtraMore" @click="showExtraMore(index)">查看更多</span></div>
            <div v-if="item.extraPictures" class="c-pb24 c-flex-row c-flexw-wrap c-mt16">
              <div v-for="(img, imgIndex) in item.extraPictures" :key="imgIndex" @click="clickPreviewImage(imgIndex, img, item.extraPictures)">
                <div class="c-ww290 c-hh290 c-flex-row c-aligni-center c-text-hidden c-br10" :class="(imgIndex + 1) % 2 == 0 ? '':'c-mr12'" v-if="item.extraPictures.length == 2"><img :src="$addXossFilter(img)" class="c-object-fit-cover c-w100 c-h"></div>
                <div class="c-ww188 c-hh188 c-flex-row c-aligni-center c-text-hidden c-br10" :class="[(imgIndex + 1) % 3 == 0 ? '':'c-mr12',imgIndex <= 2 ? 'c-mb10' : '']" v-else-if="item.extraPictures.length >= 3"><img :src="$addXossFilter(img)" class="c-object-fit-cover c-w100 c-h"></div>
                <div class="c-ww160 c-hh160 c-flex-row c-aligni-center c-text-hidden c-br10 c-mr12" v-else><img :src="$addXossFilter(img)" class="c-object-fit-cover c-w100 c-h"></div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="item.commentReply && item.commentReply.length > 0">
          <div class="c-bg-f6 c-ph12 c-pt12 c-mt12 c-br4">
            <p class="c-fc-sblack c-fs22">商家回复：</p>
            <div v-for="(con, i) in item.commentReply" :key="i" class="c-fc-xbalck c-fs22">
              <div class="c-pv10">{{con.content}}</div>
              <div :class="item.commentReply.length - 1 != i ? 'underline' : ''"></div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <!-- 查看已评价列表 -->
    <template v-if="showType == 4">
      <div v-for="(item, index) in subComment" :key="index" class="c-flex-column c-aligni-sb c-mb12 c-bg-white c-pv24 c-ph24 c-br16 c-text-hidden" @click="goCommentDetail(item.id)">
        <div :class="item.commentExtraStatus == -1 ? 'c-fc-gray' : 'theme-fc'" class="c-pb20 c-flex-row c-aligni-center c-justify-sb c-bd-b1" v-if="item.commentExtraStatus != 0">
          <span class="c-fs24">{{item.commentExtraStatus == -1 ? '追评已删除' : '已追评'}}</span>
          <i class="iconfont c-fs16 c-fc-gray">&#xe60e;</i>
        </div>
        <div class="c-flex-row c-aligni-start c-justify-sb c-mb24" :class="item.commentExtraStatus != 0 ? 'c-pt20' : ''">
          <div class="c-ww80 c-hh80 c-text-hidden c-br8">
            <img class="c-w100" :src="$addXossFilter(item.avatar)" alt="" />
          </div>
          <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb c-pl20 c-hh80">
            <div class="c-fs24 c-lh34 c-fc-xblack c-text-ellipsis1">{{item.goodsName}}</div>
            <div class="c-flex-row c-aligni-center c-justify-sb">
              <div class="c-fs22 c-lh32 c-fc-sgray">{{item.createdAt}}</div>
              <div class="c-flex-row c-aligni-center c-ml8" v-if="item.isAcquiesceComment == 0">
                <span class="c-fs24 iconfont c-ml12" :class="item.starRank >= num ? 'theme-fc' : 'c-fc-e6'" v-for="num in 5" :key="num">&#xe8c7;</span>
              </div>
            </div>
          </div>
        </div>
        <div class="c-fs22 c-fc-xblack c-mt12" v-if="item.isAcquiesceComment == 1 && item.isUpdated == 0">系统默认好评</div>
        <div class="c-fs22 c-fc-xblack c-mt12 c-text-ellipsis2 c-textAlign-j" v-else>{{item.words != null ? item.words : '您没有对本次交易留下评语哦~'}}</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-fc-sgray c-mt20 c-bd-t1 c-pt20 c-justify-end" v-if="item.commentExtraStatus == 0">
          <div class="c-ph30 c-pv8 c-br25 theme-bd1 theme-fc c-mt10" @click.stop="addExtraComment(item)" v-if="item.commentExtraStatus == 0">追加评价</div>
        </div>
      </div>
    </template>

    <open-modal :openModal='showExtraOperation' @closeModal='showExtraOperation = false'>
      <div class="c-bg-sgray c-br-tl20 c-br-tr20 c-text-hidden">
        <div class="c-p c-mb12 c-bg-white c-ph24">
          <div class="c-pv24 c-w100 c-textAlign-c c-fs22 c-fc-sblack c-bd-b1-mgray">首次追评30天内允许进行一次修改和删除操作</div>
          <div class="c-pv24 c-fc-xblack c-fs24 c-flex-row c-aligni-center" :class="currentComment && currentComment.extra.isUpdated == 0 ? 'c-bd-b1-mgray' : ''" @click="deleteExtra"><span class="iconfont c-fs24 theme-fc c-mr24">&#xe6b3;</span>删除追评</div>
          <div class="c-pv24 c-fc-xblack c-fs24 c-flex-row c-aligni-center" @click="editExtra" v-if="currentComment && currentComment.extra.isUpdated == 0"><span class="iconfont icon-bianji2 c-fs24 theme-fc c-mr24"></span>修改追评</div>
        </div>
        <div class="c-pv24 c-fc-xblack c-fs24 c-textAlign-c c-bg-white" @click="showExtraOperation = false">取消</div>
      </div>
    </open-modal>
  </div>
</template>
<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import OpenModal from "@/components/templates/common/openModal.vue";
let serverIdImgArr = []; //临时存放的上传图片searveID
let imgData = {};
export default {
  name: 'ShopCommentCom',
  props: {
    subComment: {
      type: Array,
      default: () => {
        return []
      },
    },
    showType: { // 1是表单形式 2 是展示内容
      type: Number,
      default: 1,
    },
    showExtraOperation: {
      type: Boolean, // 展示追加评价操作
      default: false,
    }
  },
  components: {
    OpenModal
  },
  data() {
    return {
      isWeiXin: true,
      rankMap: {
        '1': '生气',
        '2': '失望',
        '3': '一般',
        '4': '满意',
        '5': '非常满意'
      },
      showTextIcon: true, // 输入框的图标展示
      inputIndex: '', // 判断正在输入的索引
      currentComment: null, // 当前评价
    }
  },
  watch: {
    subComment() {
      if (this.subComment && this.subComment.length > 0) {
        this.subComment.forEach((item, index) => {
          this.$set(this.subComment[index], 'showIcon', true);
          if (item.extra) {
            this.$set(this.subComment[index].extra, 'showExtraIcon', true);
          }
        })
      }
    }
  },
  computed: {
    // 判断评价时间是否在30天内
    checkTime() {
      return function(createTime) {
        let isTest = window.location.href.indexOf('http://kptest') > -1 || window.location.href.indexOf('https://kptest') > -1; // 正式平台用30天，测试平台用30分钟
        let createT = utilJs.getTimeByDate(createTime) / 1000;
        let judgeTime = isTest ? (30 * 60) : (30 * 24 * 60 * 60);
        let currentT = Date.parse(new Date()) / 1000;
        let diffTime = (currentT - createT) < judgeTime ? true : false;
        if (diffTime) {
          return true;
        } else {
          return false;
        }
      }
    },
  },
  methods: {
    // 打卡追评操作
    clickShowExtraOperation(item) {
      this.showExtraOperation = true;
      this.currentComment = item;
    },
    // 编辑追加评论
    editExtra() {
      this.$emit('editExtra', this.currentComment);
    },
    // 删除追问评价
    deleteExtra() {
      this.$emit('deleteExtra', this.currentComment.extra.mceId);
      this.showExtraOperation = false;
    },
    // 添加追加评价
    addExtraComment(item) {
      this.$emit('addExtraComment', item);
    },
    // 点击追评查看更多
    showExtraMore(index) {
      this.$emit('showExtraMore', index);
    },
    // 点击评价查看更多
    showMore(index) {
      this.$emit('showMore', index);
    },
    // 判断是否可以操作
    checkTime(createTime) {
      let isTest = window.location.href.indexOf('http://kptest') > -1 || window.location.href.indexOf('https://kptest') > -1; // 正式平台用30天，测试平台用30分钟
      let createT = utilJs.getTimeByDate(createTime) / 1000;
      let judgeTime = isTest ? (30 * 60) : (30 * 24 * 60 * 60);
      let currentT = Date.parse(new Date()) / 1000;
      let diffTime = currentT - createT < judgeTime ? true : false;
      if (isTest && diffTime) {
        return true;
      } else {
        return false;
      }
    },
    // 跳转到商品详情
    goShopDetail(mgId) {
      this.$routerGo(this, "push", {
        path: "/mall/shopDetail/shopDetail",
        query: {
          shopNo: mgId
        }
      })
    },
    // 跳转到评价详情
    goCommentDetail(id) {
      this.$emit('goCommentDetail', id)
    },
    // 删除评价
    delectComment(id) {
      this.$emit('delectComment', id)
    },
    // 修改评价
    updateComment(item) {
      let arr = [];
      arr.push(item);
      this.$emit('updateComment', arr)
    },
    // 设置匿名
    setAnonymous(index) {
      this.subComment[index].isAnonymous = this.subComment[index].isAnonymous == 0 ? 1 : 0;
    },
    // 图片预览
    clickPreviewImage(index, imgUrl, imgs) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of imgs) {
        imgArr.push(key);
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    // 上传图片
    clickAddPic(index, event, picList, extra) {
      if (picList == null) picList = [];
      if (!picList && !extra) {
        this.subComment[index].pictures = [];
      }
      if (!picList && extra && extra.extraPictures == null) {
        this.subComment[index].extra.extraPictures = [];
      }
      if (picList && picList.length > 6) {
        this.$showCjToast({
          text: "图片最多只能传6张",
          type: "warn",
          time: 1500
        });
        return;
      };
      if (this.isWeiXin) {
        wxUtilJs.chooseImage({
          count: 6, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          this.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = 6 - picList.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1, index, picList, extra);
        });
      } else {
        utilJs.imgUpload(event.target.files, imgData, 'shopComment', res => {
          if (res.length > 0) {
            if (picList && picList.length <= 6) {
              picList.push(res);
            }
            if (!extra) {
              this.$set(this.subComment[index], 'pictures', picList);
            } else {
              this.$set(this.subComment[index].extra, 'extraPictures', picList);
            }
          }
        }, fRes => {});
      }
    },
    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength, index, picList, extra) {
      wxUtilJs
        .uploadImage({
          localId: localIds[localIdsLength]
        }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength, index, picList, extra);
          } else {
            this.syncUploadPic(serverIdImgArr, index, picList, extra);
          }
        });
    },
    //上传图片到服务器
    syncUploadPic(serverIdArr, index, picList, extra) {
      utilJs.postMethod(global.apiurl + "common/forms/wxUploadImg", {
        serverId: JSON.stringify(serverIdArr),
        mediaType: 2
      },
        res => {
          this.$loading.hide();
          for (let key of res) {
            if (picList.length >= 6) {
              break;
            }
            picList.push(key)
          }
          if (!extra) {
              this.$set(this.subComment[index], 'pictures', picList);
          } else {
            this.$set(this.subComment[index].extra, 'extraPictures', picList);
          }
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    // 删除图片
    delUploadImage(index, imgIndex, extra) {
      if (extra != null) {
        this.subComment[index].extra.extraPictures.splice(imgIndex, 1);
        return
      }
      this.subComment[index].pictures.splice(imgIndex, 1);
    },
    // 满意评星
    showStars(index, num) {
      this.$set(this.subComment[index], 'starRank', num);
    },
    // 提交评价信息
    addComment() {
      let data = [];
      utilJs.postMethod(`${global.apiurl}goodsOrders/subOrderPage`, data,
        res => {
          this.goodsInfo = res.goods;
        }
      )
    },
    // 监听输入框拼写中英文
    onKeyUp(e) {
      if (this.subComment[this.inputIndex].extra) {
        if ((e.target.value && e.target.value.length > 0) || (this.subComment[this.inputIndex].extra.extraWords && this.subComment[this.inputIndex].extra.extraWords.length > 0)) {
          this.$set(this.subComment[this.inputIndex].extra, 'showExtraIcon', false);
        } else {
          this.$set(this.subComment[this.inputIndex].extra, 'showExtraIcon', true);
        }
        return
      }
      if ((e.target.value && e.target.value.length > 0) || (this.subComment[this.inputIndex].words && this.subComment[this.inputIndex].words.length > 0)) {
        this.$set(this.subComment[this.inputIndex], 'showIcon', false);
      } else {
        this.$set(this.subComment[this.inputIndex], 'showIcon', true);
      }
    },
    onKeyDown(index, extra) {
      this.inputIndex = index;
      if (extra) {
        this.$set(this.subComment[index].extra, 'showExtraIcon', false);
        return
      }
      this.$set(this.subComment[index], 'showIcon', false);
    },
    nameLength(name, length) {
      return utilJs.nameLength(name, length)
    }
  },
  created() {
    this.currentComment = null;
    this.isWeiXin = utilJs.isWeiXin();
    serverIdImgArr = []; //上传图片的serverID
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, res => {
        imgData = res;
      });
    }
  },
  activated() {
    this.showExtraOperation = false;
    this.currentComment = null;
  }
}
</script>
<style scoped>
.del-img {
  position: absolute;
  top: 0rem;
  right: 0rem;
  cursor: pointer;
  font-size: 0.25rem;
  width: 0.8rem;
  height: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 0.36rem;
  z-index: 5;
}
.del-img::before{
  z-index: 10;
}
.del-img::after{
  position: absolute;
  height: 1.8rem;
  width: 1.8rem;
  top: -0.9rem;
  right: -0.9rem;
  content: "";
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  z-index: -1;
}
.textareaPlaceholder {
  font-size: 0.55rem;
  line-height: 0.8rem;
  color: #ccc;
}
textarea {
  position: relative;
  z-index: 10;
  background: none;
}
textarea::-webkit-input-placeholder {
  font-size: 0.55rem;
  line-height: 0.8rem;
  color: #ccc;
  padding-left: 0.9rem;
}
textarea::-moz-placeholder {
  font-size: 0.55rem;
  line-height: 0.8rem;
  color: #ccc;
}
textarea::-moz-placeholder {
  font-size: 0.55rem;
  line-height: 0.8rem;
  color: #ccc;
}
textarea::-ms-input-placeholder {
  font-size: 0.55rem;
  line-height: 0.8rem;
  color: #ccc;
}
.c-bd-dash-e6 {
  border: dashed 1px #e6e6e6;
}
.c-ww290 {
  width: 7.25rem;
}
.c-hh290 {
  height: 7.25rem;
}
.c-p-b-4 {
  bottom: -0.1rem;
}
.c-text-ellipsis5{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.underline {
  background: #e6e6e6;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}
</style>